<template>
    <view class="page over-auto-y column">
        <hj-navbar title="提前退房申请" />
        <!-- 内容区 -->
        <view class="flex-auto w100 over-auto-y">
            <view class="tips pt-20 pl-30 pr-30 pb-40">
                <view class="t-w tips-in br-20 ft-26">
                    温馨提示：提前退房申请结果由酒店决定，预计2小时内回复您，请耐心等待或联系前台客服。
                </view>
            </view>
            <view class="date-box list pr-30 pl-30 w100 ft-30">
                <view class="list-top align-center">
                    <view class="count bold">01</view>
                    <view class="flex-auto">请选择退房日期<text class="error">*</text></view>
                </view>
                <view
                    class="list-bot space-between align-center ml-50"
                    @click="showDatePopup = true"
                >
                    <view class="flex-auto" :class="[formData.checkOutDate ? 't-3' : 't-9']">
                        {{ formData.checkOutDate || '请选择' }}
                    </view>
                    <view class="list-bot-img">
                        <hj-image
                            src="right-01.png"
                            height="28rpx"
                            width="28rpx"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view class="list pr-30 pl-30 w100 ft-30">
                <view class="list-top align-center">
                    <view class="count bold">02</view>
                    <view class="flex-auto">提前退房原因<text class="error">*</text></view>
                </view>
                <view
                    class="list-bot space-between align-center ml-50"
                    @click="showCancelPopup = true"
                >
                    <view class="flex-auto" :class="[formData.reason ? 't-3' : 't-9']">
                        {{ formData.reason || '请选择' }}
                    </view>
                    <view class="list-bot-img">
                        <hj-image
                            src="right-01.png"
                            height="28rpx"
                            width="28rpx"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view class="list pr-30 pl-30 w100 ft-30">
                <view class="list-top align-center">
                    <view class="count bold">03</view>
                    <view class="flex-auto">请描述详情，有助于店家了解详情</view>
                </view>
                <view class="list-tarea br-12">
                    <textarea
                        class="textarea w100"
                        v-model="formData.detailReason"
                        placeholder="请填写详情。"
                        maxlength="200"
                    ></textarea>
                </view>
            </view>
        </view>
        <view class="p-30 pb-20">
            <up-button
                type="primary"
                :loading="butLoading"
                loadingText="提交中"
                @click="submit"
                shape="circle"
                class="but"
            >
                <view class="t-w ft-30 bold center">提交</view>
            </up-button>
        </view>
        <!-- 底部安全区域 -->
        <hj-safe-footer />
        <!-- 取消原因选择弹窗 -->
        <CancelPopup
            v-model="showCancelPopup"
            cancelSubmitText="确定"
            @cancelSubmit="cancelSubmit"
        />
        <!-- 退房日期选择 -->
        <DatePopup v-model="showDatePopup" :timeRange="timeRange" @submit="selectTime" />
    </view>
</template>

<script setup>
/**
 * @description 修改退房日期
 * @author yinzhi
 * @date 2025-05
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
import { throttle } from '@/uni_modules/uview-plus'
import CancelPopup from '../order-list/components/CancelPopup.vue'
import DatePopup from './components/DatePopup.vue'
import { logger } from '@/utils/log.js'
import { updateCheckoutApi } from '@/libs/api/orderApi.js'
// 引入组件
defineComponent({
    components: {
        CancelPopup,
        DatePopup
    }
})
// 退房表单数据
const formData = ref({
    checkOutDate: '',
    reason: '',
    detailReason: ''
})
// 取消原因弹窗显示
const showCancelPopup = ref(false)
// 日期选择
const showDatePopup = ref(false)
// 订单号
const orderNo = ref('')
// 按钮loading
const butLoading = ref(false)

const timeRange = ref({
    checkInDate: '',
    checkOutDate: ''
})

onLoad(e => {
    // 从个人中心跳转的携带的参数 订单状态
    if (e.orderNo) {
        orderNo.value = e.orderNo
    }
    if (e.start) {
        timeRange.value.checkInDate = e.start
    }
    if (e.end) {
        timeRange.value.checkOutDate = e.end
    }
})

// 提交表单
const submit = async () => {
    if (!formData.value.checkOutDate || !formData.value.reason) {
        uni.showToast({
            title: '请完善信息',
            duration: 2000,
            icon: 'none'
        })
        return
    }
    if (butLoading.value) return
    butLoading.value = true
    try {
        const data = await updateCheckoutApi({
            orderNo: orderNo.value,
            ...formData.value
        })
        uni.$emit('upDataOrder', {
            orderNo: orderNo.value,
            isEdit: true
        })
        uni.showToast({
            title: '提交成功',
            duration: 2000,
            icon: 'none'
        })
        let time = setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })
            clearTimeout(time)
        }, 1500)
    } catch (error) {
        butLoading.value = false
        logger.error('[updateOrderApi] 修改订单失败:', error)
    }
}

// 选择日期
const selectTime = time => {
    formData.value.checkOutDate = time
}

// 退房原因
const cancelSubmit = data => {
    formData.value.reason = data.cancelReason || ''
    uni.hideLoading()
}
</script>

<style scoped lang="scss">
:deep(.textarea-placeholder) {
    font-size: 30rpx;
}
.textarea {
    padding: 14rpx 20rpx;
}
.list {
    border-bottom: 20rpx solid $uni-bg-color-grey;
    &-top {
        height: 96rpx;
        .count {
            width: 50rpx;
        }
        .error {
            color: $uni-color-error;
            margin-left: 4rpx;
        }
    }
    &-bot {
        border-top: 1px solid #e1e1e1;
        height: 98rpx;
        &-img {
            margin-right: -4rpx;
        }
    }
    &-tarea {
        background: #f6f7fb;
    }
}
.list:last-child {
    border: none;
}
.date-box {
    min-height: 40rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: $uni-bg-color;
    margin-top: -20rpx;
    position: relative;
    z-index: 9;
}
.tips {
    background: $uni-color-primary;
    &-in {
        border: 1px solid $uni-bg-color;
        background: rgba($color: $uni-bg-color, $alpha: 0.1);
        line-height: 1.4;
        padding: 20rpx;
    }
}
.but {
    height: 88rpx !important;
    background: $uni-color-primary;
}
</style>
